<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片识别功能测试</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/icons.css">
    <style>
        body {
            background-color: #F5F7FA;
            font-family: sans-serif;
            padding: 20px;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #E0E0E0;
            border-radius: 8px;
        }
        .test-title {
            font-size: 18px;
            font-weight: bold;
            color: #2E7D32;
            margin-bottom: 15px;
        }
        .test-button {
            background-color: #2E7D32;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            margin: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .test-button:hover {
            background-color: #1B5E20;
        }
        .test-button:disabled {
            background-color: #CCCCCC;
            cursor: not-allowed;
        }
        .result-area {
            margin-top: 15px;
            padding: 15px;
            background-color: #F5F5F5;
            border-radius: 8px;
            min-height: 100px;
        }
        .status {
            padding: 8px 12px;
            border-radius: 4px;
            margin: 5px 0;
            font-size: 12px;
        }
        .status.success {
            background-color: #E8F5E9;
            color: #2E7D32;
        }
        .status.error {
            background-color: #FFEBEE;
            color: #C62828;
        }
        .status.info {
            background-color: #E3F2FD;
            color: #1565C0;
        }
        .image-preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 8px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1 style="text-align: center; color: #2E7D32; margin-bottom: 30px;">图片识别功能测试</h1>
        
        <!-- 功能支持测试 -->
        <div class="test-section">
            <div class="test-title">1. 功能支持检测</div>
            <button class="test-button" onclick="testFeatureSupport()">检测功能支持</button>
            <div id="feature-result" class="result-area">
                <div class="status info">点击按钮开始检测...</div>
            </div>
        </div>

        <!-- 拍照功能测试 -->
        <div class="test-section">
            <div class="test-title">2. 拍照功能测试</div>
            <button class="test-button" onclick="testCamera()">测试拍照</button>
            <div id="camera-result" class="result-area">
                <div class="status info">点击按钮测试拍照功能...</div>
            </div>
        </div>

        <!-- 相册选择测试 -->
        <div class="test-section">
            <div class="test-title">3. 相册选择测试</div>
            <button class="test-button" onclick="testGallery()">测试相册选择</button>
            <div id="gallery-result" class="result-area">
                <div class="status info">点击按钮测试相册选择功能...</div>
            </div>
        </div>

        <!-- 图片压缩测试 -->
        <div class="test-section">
            <div class="test-title">4. 图片压缩测试</div>
            <button class="test-button" onclick="testCompression()">测试图片压缩</button>
            <div id="compression-result" class="result-area">
                <div class="status info">点击按钮测试图片压缩功能...</div>
            </div>
        </div>

        <!-- AI识别测试 -->
        <div class="test-section">
            <div class="test-title">5. AI识别测试</div>
            <button class="test-button" onclick="testAIRecognition()">测试AI识别</button>
            <div id="ai-result" class="result-area">
                <div class="status info">点击按钮测试AI识别功能...</div>
            </div>
        </div>

        <!-- 完整流程测试 -->
        <div class="test-section">
            <div class="test-title">6. 完整流程测试</div>
            <button class="test-button" onclick="testFullFlow()">测试完整流程</button>
            <div id="fullflow-result" class="result-area">
                <div class="status info">点击按钮测试完整流程...</div>
            </div>
        </div>

        <!-- 网络连接测试 -->
        <div class="test-section">
            <div class="test-title">7. 网络连接测试</div>
            <button class="test-button" onclick="testNetworkConnection()">测试网络连接</button>
            <div id="network-result" class="result-area">
                <div class="status info">点击按钮测试网络连接...</div>
            </div>
        </div>
    </div>

    <script src="../js/mui.js"></script>
    <script src="../js/imageRecognition.js"></script>
    <script>
        let testImageData = null;

        // 功能支持检测
        function testFeatureSupport() {
            const resultDiv = document.getElementById('feature-result');
            resultDiv.innerHTML = '';

            const features = [
                { name: '图片识别模块', test: () => !!window.imageRecognition },
                { name: '摄像头支持', test: () => imageRecognition.isCameraSupported() },
                { name: '相册支持', test: () => imageRecognition.isGallerySupported() },
                { name: 'Canvas支持', test: () => !!document.createElement('canvas').getContext },
                { name: 'FileReader支持', test: () => !!window.FileReader },
                { name: 'EventSource支持', test: () => !!window.EventSource },
                { name: 'Plus API支持', test: () => !!window.plus },
                { name: '网络连接', test: () => navigator.onLine }
            ];

            features.forEach(feature => {
                const status = feature.test() ? 'success' : 'error';
                const message = feature.test() ? '✅ 支持' : '❌ 不支持';
                resultDiv.innerHTML += `<div class="status ${status}">${feature.name}: ${message}</div>`;
            });

            // 显示环境信息
            const env = imageRecognition.checkEnvironment();
            resultDiv.innerHTML += `<div class="status info">环境信息: ${JSON.stringify(env)}</div>`;

            // 显示配置信息
            const config = {
                baseUrl: localStorage.getItem("ip"),
                backend: localStorage.getItem("backend"),
                userId: localStorage.getItem("userId")
            };
            resultDiv.innerHTML += `<div class="status info">配置信息: ${JSON.stringify(config)}</div>`;
        }

        // 拍照功能测试
        function testCamera() {
            const resultDiv = document.getElementById('camera-result');
            resultDiv.innerHTML = '<div class="status info">正在测试拍照功能...</div>';

            imageRecognition.takePhoto(
                (imageData) => {
                    resultDiv.innerHTML = `
                        <div class="status success">✅ 拍照成功</div>
                        <img src="${imageData}" class="image-preview" alt="测试图片">
                        <div class="status info">图片大小: ${(imageData.length / 1024).toFixed(2)} KB</div>
                    `;
                    testImageData = imageData;
                },
                (error) => {
                    resultDiv.innerHTML = `<div class="status error">❌ 拍照失败: ${error}</div>`;
                }
            );
        }

        // 相册选择测试
        function testGallery() {
            const resultDiv = document.getElementById('gallery-result');
            resultDiv.innerHTML = '<div class="status info">正在测试相册选择功能...</div>';

            imageRecognition.selectFromGallery(
                (imageData) => {
                    resultDiv.innerHTML = `
                        <div class="status success">✅ 相册选择成功</div>
                        <img src="${imageData}" class="image-preview" alt="测试图片">
                        <div class="status info">图片大小: ${(imageData.length / 1024).toFixed(2)} KB</div>
                    `;
                    testImageData = imageData;
                },
                (error) => {
                    resultDiv.innerHTML = `<div class="status error">❌ 相册选择失败: ${error}</div>`;
                }
            );
        }

        // 图片压缩测试
        function testCompression() {
            const resultDiv = document.getElementById('compression-result');
            
            if (!testImageData) {
                resultDiv.innerHTML = '<div class="status error">❌ 请先选择或拍摄一张图片</div>';
                return;
            }

            resultDiv.innerHTML = '<div class="status info">正在测试图片压缩...</div>';

            // 创建一个大图片进行压缩测试
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 1200;
            canvas.height = 800;
            
            // 绘制测试图案
            ctx.fillStyle = '#2E7D32';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';
            ctx.font = '48px Arial';
            ctx.fillText('测试图片', 100, 100);

            const originalData = canvas.toDataURL('image/jpeg', 1.0);
            
            imageRecognition.compressImage(
                originalData,
                (compressedData) => {
                    const originalSize = (originalData.length / 1024).toFixed(2);
                    const compressedSize = (compressedData.length / 1024).toFixed(2);
                    const compressionRatio = ((1 - compressedData.length / originalData.length) * 100).toFixed(1);
                    
                    resultDiv.innerHTML = `
                        <div class="status success">✅ 压缩成功</div>
                        <div class="status info">原始大小: ${originalSize} KB</div>
                        <div class="status info">压缩后大小: ${compressedSize} KB</div>
                        <div class="status info">压缩率: ${compressionRatio}%</div>
                        <img src="${compressedData}" class="image-preview" alt="压缩后图片">
                    `;
                },
                (error) => {
                    resultDiv.innerHTML = `<div class="status error">❌ 压缩失败: ${error}</div>`;
                }
            );
        }

        // AI识别测试
        function testAIRecognition() {
            const resultDiv = document.getElementById('ai-result');
            
            if (!testImageData) {
                resultDiv.innerHTML = '<div class="status error">❌ 请先选择或拍摄一张图片</div>';
                return;
            }

            resultDiv.innerHTML = '<div class="status info">正在测试AI识别...</div>';

            // 模拟AI识别过程
            setTimeout(() => {
                resultDiv.innerHTML = `
                    <div class="status success">✅ AI识别测试完成</div>
                    <div class="status info">图片已发送到AI服务器</div>
                    <div class="status info">注意：实际AI识别需要后端服务支持</div>
                `;
            }, 2000);
        }

        // 完整流程测试
        function testFullFlow() {
            const resultDiv = document.getElementById('fullflow-result');
            resultDiv.innerHTML = '<div class="status info">开始完整流程测试...</div>';

            let step = 1;
            const totalSteps = 4;

            function nextStep() {
                switch(step) {
                    case 1:
                        resultDiv.innerHTML += '<div class="status info">步骤1: 检测功能支持...</div>';
                        if (imageRecognition.isCameraSupported() || imageRecognition.isGallerySupported()) {
                            resultDiv.innerHTML += '<div class="status success">✅ 功能支持正常</div>';
                        } else {
                            resultDiv.innerHTML += '<div class="status error">❌ 功能支持异常</div>';
                        }
                        break;
                    case 2:
                        resultDiv.innerHTML += '<div class="status info">步骤2: 测试图片选择...</div>';
                        // 模拟图片选择
                        setTimeout(() => {
                            resultDiv.innerHTML += '<div class="status success">✅ 图片选择正常</div>';
                            nextStep();
                        }, 1000);
                        return;
                    case 3:
                        resultDiv.innerHTML += '<div class="status info">步骤3: 测试图片压缩...</div>';
                        setTimeout(() => {
                            resultDiv.innerHTML += '<div class="status success">✅ 图片压缩正常</div>';
                            nextStep();
                        }, 1000);
                        return;
                    case 4:
                        resultDiv.innerHTML += '<div class="status info">步骤4: 测试AI识别...</div>';
                        setTimeout(() => {
                            resultDiv.innerHTML += '<div class="status success">✅ AI识别流程正常</div>';
                            resultDiv.innerHTML += '<div class="status success">🎉 完整流程测试通过！</div>';
                        }, 1000);
                        return;
                }
                step++;
                setTimeout(nextStep, 500);
            }

            nextStep();
        }

        // 网络连接测试
        function testNetworkConnection() {
            const resultDiv = document.getElementById('network-result');
            resultDiv.innerHTML = '<div class="status info">正在测试网络连接...</div>';

            // 检查网络连接
            if (navigator.onLine) {
                resultDiv.innerHTML = '<div class="status success">✅ 网络连接正常</div>';
            } else {
                resultDiv.innerHTML = '<div class="status error">❌ 网络连接异常</div>';
            }
        }

        // 页面加载完成后自动检测功能支持
        window.addEventListener('load', function() {
            setTimeout(testFeatureSupport, 500);
        });
    </script>
</body>
</html> 